<!-- 支持横向布局 -->
<template>
  <div class="menuX2">
    <el-menu ref="menuDom" @open="props.openFn" :default-active="props.active"
             :ellipsis="props.ellipsis"
             :unique-opened="props.onlyOne" :mode="props.horizontal?'horizontal':undefined"
             :collapse="props.collapse" class="menuX2Box">

      <span v-for="(menuItem,index) in props.data" :key="menuItem[propsD.index]">
        <span v-if="(menuItem[propsD.children] == undefined || menuItem[propsD.children].length<=0) && menuItem[propsD.show]!=false">
          <el-menu-item class="menuItem firstMenu" :class="{firstIcon: menuItem[propsD.icon]}"
                        :index="menuItem[propsD.index]" @click="clickChildFn(menuItem)">
            <div class="menuText">
              <slot name="icon" :data="menuItem">
                <icon-x v-if="menuItem[propsD.icon]" :type="menuItem[propsD.icon]" class="menuIcon"/>
              </slot>
              <slot name="title" :data="menuItem">
                {{ menuItem[propsD.title] }}
              </slot>
            </div>
          </el-menu-item>
        </span>

        <span v-else>
          <children-menux :item="menuItem" is-first :popper-class="props.popperClass"
                          :props="propsD" @click-child="clickChildFn">
            <template #title="{data}">
              <div class="menuText">
                <slot name="icon" :data="data">
                  <icon-x v-if="data[propsD.icon]" :type="data[propsD.icon]" class="menuIcon"/>
                </slot>
                <slot name="title" :data="data">
                {{ data[propsD.title] }}
              </slot>
              </div>
            </template>
          </children-menux>
        </span>

      </span>

    </el-menu>
  </div>
</template>

<script setup>
import {computed, ref,watch} from 'vue'
import ChildrenMenux from "./xhykMenuItem2.vue";
import IconX from "../xhykIcon.vue";
import { ElMenu,ElMenuItem } from 'element-plus'


const props = defineProps({
  // 菜单列表
  data: {
    type: Object,
    default: []
  },
  // 菜单对应属性
  props: {
    type: Object,
    default: {
      index: 'name', // 唯一标识
      title: 'title', // 菜单title
      icon: '', // 菜单title
      children: 'children', // 子菜单字段
      show: 'show', // 是否显示这个菜单
    }
  },

  // 菜单类型
  horizontal: {
    type: Boolean,
    default: false
  },

  // 点击了子菜单项的回调事件
  clickFn: {
    type: Function,
    default: function (item) {
      // console.log(item)
    }
  },
  // 显示菜单前回调函数
  showBeforeFn: {
    type: Function,
    default: item => {
      // console.log(item)
      return true
    }
  },
  // 菜单打开回调函数
  openFn: {
    type: Function,
    default: index => {
      // console.log(index)
    }
  },
  // 默认激活的菜单
  active: {
    type: String,
    default: 'shouYe'
  },

  // 折叠
  collapse: {
    type: Boolean,
    default: false
  },

  // 撑开宽度
  openWidth: {
    type: [Number, String],
    default: 'auto'
  },

  // 只能打开一个
  onlyOne: {
    type: Boolean,
    default: false
  },

  // 是否进行省略
  ellipsis: {
    type: Boolean,
    default: false
  },

  // 弹窗类名
  popperClass: {
    type: String,
    default: 'xhMenuX2'
  },

})

const emit = defineEmits(['clickChild'])

// 设置标题和图标
const menuData = ref([])


watch(() => props.data, newV => {
  menuData.value = JSON.parse(JSON.stringify(newV))
}, {immediate: true, deep: true})


// 设置默认的字段
const propsD = computed(() => {
  return {
    index: props.props.index || 'name',
    title: props.props.title || 'title',
    icon: props.props.icon || 'icon',
    children: props.props.children || 'children',
    show: props.props.show || 'show',
  }
})

// 点击子级
const clickChildFn = (item) => {
  emit('clickChild',item)
}


// 给外部使用的函数
const menuDom = ref({})
// 打开菜单
const open = (index) => {
  menuDom.value.open(index)
}
// 关闭菜单
const close = index => {
  menuDom.value.close(index)
}
defineExpose({
  open,
  close
})


</script>

<style scoped lang='scss'>
.menuX2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.menuX2Box {
  width: 100%;
  overflow: hidden;
  height: 100%;
  border: none;

  /* 修改高度 */
  .el-sub-menu, .el-menu-item {
    height: 100%;
  }
}


:deep(.menuX2Box) {
  .el-sub-menu__title {
    //border-bottom: none !important;
    //color: #606266 !important;
    height: 100% !important;
  }
}

.menuText {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .menuIcon {
    margin: 0px 0px;
  }
}

.firstIcon {
  padding-left: 16px;
}

// 省略元素，居中
:deep(.el-sub-menu__hide-arrow) {
  .el-sub-menu__title {
    padding: 20px 20px;
  }
}

</style>